---
import config from "@/config/config.json";
import Base from "@/layouts/Base.astro";
import { getListPage } from "@/lib/contentParser.astro";
import PageHeader from "@/partials/PageHeader.astro";

const contactIndex = await getListPage("contact", "-index");
const { contact_form_action }: { contact_form_action: string } = config.params;
const { title, description, meta_title, image } = contactIndex.data;

if (contactIndex.data.draft) {
  return Astro.redirect("/404");
}
---

<Base
  title={title}
  meta_title={meta_title}
  description={description}
  image={image}
>
  <PageHeader title={title} />
  <section class="section-sm">
    <div class="container">
      <div class="row">
        <div class="mx-auto md:col-10 lg:col-6">
          <form action={contact_form_action} method="POST">
            <div class="mb-6">
              <label for="name" class="form-label">
                Full Name <span class="text-red-500">*</span>
              </label>
              <input
                id="name"
                name="name"
                class="form-input"
                placeholder="John Doe"
                type="text"
                required
              />
            </div>
            <div class="mb-6">
              <label for="email" class="form-label">
                Working Mail <span class="text-red-500">*</span>
              </label>
              <input
                id="email"
                name="email"
                class="form-input"
                placeholder="john.doe@email.com"
                type="email"
                required
              />
            </div>
            <div class="mb-6">
              <label for="message" class="form-label">
                Anything else? <span class="text-red-500">*</span>
              </label>
              <textarea
                id="message"
                name="message"
                class="form-input"
                placeholder="Message goes here..."
                required
                rows="8"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </section>
</Base>
